<template>
  <div class="choose">
    <h1>欢迎登录社团管理平台，请问您的身份是？</h1>
    <div class="card-wrapper">
      <IdentityCard
        iClass="iconfont icon-huoban"
        choice="我是社团负责人"
        name="AEnrollment"
        :id="id"
      ></IdentityCard>
      <IdentityCard
        :isMask="true"
        iClass="iconfont icon-ic_form_set24px"
        choice="我是部门负责人"
        name="DEnrollment"
        :departments="departments"
      ></IdentityCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,onMounted} from "vue";
import {  useRoute } from "vue-router";
import IdentityCard from "../components/IdentityCard.vue";
import store from '../store/index'
import { userRequest } from "../api/UserRequest";
let id=ref(0)
let departments=ref([])
onMounted(()=>{
  userRequest.getUserInfo().then((res)=>{
    id.value=~~res.association.id
    departments.value=res.list
  })
})

const route=useRoute()
</script>

<style lang="scss" scope>
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
  "t-grey": #8a8888,
  //字体常用颜色--灰
  "t-white": #f5f5f5,
  //字体常用颜色--白
  "border": #707070 //边框颜色,,,,,,,,,
);
.choose {
  h1 {
    text-align: center;
    margin-top: 20px;
    font-size: 45px;
    color: map-get($map: $colors, $key: t-grey);
  }
  .card-wrapper {
    margin: 0 auto;
    margin-top: 111px;
    width: 1070px;
    display: flex;
    justify-content: space-between;
  }
}

</style>
